import ArkActionBar from "../ark-action-bar/ArkActionBar.vue";
import {ArkActionBarOptions} from "../ark-action-bar/ArkActionBarOptions";

export default {
  title: 'ark-component-v2/ArkActionBar',
  component: ArkActionBar,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、typescript、lodash、scss、ArkActionButton、ArkIconFont</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkActionBarOptions'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkActionBarOptions) => ({
    components: {ArkActionBar},
    setup() {
      return {args};
    },
    template: `
      <ArkActionBar v-model:options="args.options"/>`,
  }),
  args: {
    options: {
      actions: [
        {
          text: '刷新',
          icon: "icon-shuaxin",
          iconClass: "text-green",
        },
        {
          text: '添加',
          icon: "icon-tianjia",
          iconClass: "text-green",
        },
        {
          text: '删除',
          icon: "icon-shanchu",
          iconClass: "text-red",
        },
        {
          text: '修改',
          icon: "icon-xiugai13",
          iconClass: "text-blue",
        },
        {
          text: '查看',
          icon: "icon-chakanxuefenmingxi",
          iconClass: "text-blue",
        },
      ]
    }
  },
};